<template>
  <div class="article-list">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!--
        用van-list这个组件就拥有上拉加载更多的功能
        @load绑定的onLoad方法，这个方法是用来加载数据的
            它会在页面一打开时自动调用，并且如果没铺满一屏还会继续调用
            以及当你滚到最后，它会再调用

            如果finished为true也不会调用onLoad
            如果loading为true也不会调用onLoad

        finished：
            用来标记是否全部加载完毕，为true代表全部加载完，为false代表还没加载完，可以调用onLoad
            默认值应该为false，不然onLoad一次都不会调用

        v-model绑定的loading
            用来标记当前是否正在加载中
            为true代表正在加载中....不会调用onLoad
            为false代表当前是空闲的，没在加载。能调用onLoad

            当onLoad调用时会自动把loading改为true，这样界面上就能加载中...
            但是如果数据加载完了，它不会自动变为false的，我们还需要手动把它变为false

        总结：
            数据加载写在onLoad里
            加载完数据需要做2件事
                1. loading改为false
                2. 判断是否全部加载完，如果全部加载完把finished改为true
     -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          @click="$router.push(`/article/${item.art_id}`)"
        >
          <!-- 标题 -->
          <div class="title">{{ item.title }}</div>
          <!-- 图片 -->
          <van-grid :border="false" :column-num="item.cover.type">
            <van-grid-item
              v-for="(pic, index) in item.cover.images"
              :key="index"
            >
              <van-image class="pic" :src="pic" />
            </van-grid-item>
          </van-grid>
          <!-- 作者信息 -->
          <div class="info-box">
            <span class="name">{{ item.aut_name }}</span>
            <span class="cmt_count">{{ item.comm_count }}评论</span>
            <span class="time">{{ item.pubdate | relvTime }}</span>
            <van-icon style="float:right;" name="cross" />
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { newsListAPI } from '@/api/news'
export default {
  props: {
    channel_id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      isLoading: false
    }
  },
  methods: {
    // 下拉刷新触发
    async onRefresh () {
      // 发请求获取新闻列表，因为是刷新就应该刷新出最新的新闻
      // 所以传当前时间戳
      const res = await newsListAPI({
        channel_id: this.channel_id,
        timestamp: Date.now()
      })
      // 因为刷新数据相当于是要覆盖原来的重新开始，所以这里用赋值
      this.list = res.data.results
      // 刷新完记得把isLoading改为false，也就是关闭加载中
      this.isLoading = false
      // 如果刷新了，应该无条件把finished改为false
      this.finished = false
      // 下面这句话一定要加，否则你全部刷新完了，这个timestamp还是为null
      // 所以刷新也要把上一段时间戳存起来
      this.timestamp = res.data.pre_timestamp
    },
    async onLoad () {
      // 发请求获取新闻
      const res = await newsListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })
      // 把上一个时间段的时间戳存起来，方便下次发请求
      this.timestamp = res.data.pre_timestamp
      // 赋值 -- 会重新覆盖
      // this.list = res.data.results
      // 我们要让数组越来越多，用push
      this.list.push(...res.data.results)

      // 加载后把loading改为false
      this.loading = false

      // 如果返回的pre_timestamp为null就代表加载完了
      // if (this.timestamp === null) {
      //   this.finished = true
      // }

      // 下面这句话跟上面两句话一样
      this.finished = this.timestamp === null
    }
  }
}
</script>

<style scoped lang="less">
.article-list {
  position: fixed;
  left: 0;
  top: 90px;
  bottom: 50px;
  overflow: auto;
  width: 100%;

  .pic {
    height: 120px;
  }

  .info-box {
    span {
      color: gray;
      &:nth-child(2) {
        margin: 0 15px;
      }
    }
  }
}
</style>
